<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>“麦”向梦想活动</title>
    <link rel="stylesheet" href="main.css">
    <link rel="stylesheet" href="loop.css">
    <style>
        .main{
            height: 650px;
        }
        p{
            color: rgb(161, 28, 39);
        }
        #clock{
			height: 100px;
			font-size: 30px;
            text-align: center;
            font-family: "楷体";
        }
    </style>
    <script type="text/javascript">
           window.onload=function()
           {
               window.requestAnimationFrame(getDate)
           }
           
           function getDate()
           {
               window.setTimeout(function(){
                   window.requestAnimationFrame(getDate)
               },1000/2)
               var d=new Date();   
               var year=d.getFullYear()  //获取年
               var month=d.getMonth()+1;  //获取月，从 Date 对象返回月份 (0 ~ 11)，故在此处+1
               var day=d.getDay()    //获取日
               var days=d.getDate() //获取日期
               var hour=d.getHours()   //获取小时
               var minute=d.getMinutes()  //获取分钟
               var second=d.getSeconds()   //获取秒
               
               if(month<10) month="0"+month
               if(days<10) days="0"+days
               if(hour<10) hour="0"+hour
               if(minute<10) minute="0"+minute
               if(second<10) second="0"+second
               
               var week=new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六")
               var Tools=document.getElementById("clock")
               var da=year+" 年 "+month+" 月 "+days+" 日 "+week[day]+" "+hour+" : "+minute+" :"+second
               Tools.innerHTML=da
           }
    </script>
</head>
<body>
       <!-- 头部 -->
    <div id="titlediv">
        <div id="clock"></div>
    </div>
    <!-- 导航栏 -->
    <div id="nav">
        <ul>
            <a href="index.html"><li class="firstli">首页</li></a>
            <a href="往期回顾.html"><li class="firstli">往期回顾</li></a>
            <div class="seconddiv">
                <ul>
                    <a href="#"><li class="secondli">淘古艺术家</li></a>
                    <a href="#"><li class="secondli">毕业季</li></a>
                    <a href="#"><li class="secondli">换届大会</li></a>
                </ul>
            </div></li>
            <li class="firstli">活动介绍
            <div class="seconddiv">
                <ul id="secondul">
                    <a href="“麦”向梦想活动.html"><li class="secondli">“麦”向梦想活动</li></a>
                    <a href="回收旧衣物.html"><li class="secondli">回收旧衣物</li></a>
                    <a href="志愿者服务嘉年华.html"><li class="secondli">志愿服务嘉年华</li></a>
                    <a href="爱心回收小能手.html"><li class="secondli">爱心回收小能手</li></a>
                </ul>
            </div></li>
            <li class="firstli">关于协会
            <div class="seconddiv">
                <ul>
                    <a href="部门介绍.html"><li class="secondli">部门介绍</li></a>
                    
                </ul>
            </div></li>
        </ul>
    </div>
    <div class="main">
        <div class="kuang">
        <div class="item "><img src="img/1/爱心回收小能手/bg1.jpg.jpeg"></div>
        <div class="item "><img src="img//1/爱心回收小能手/bg2.jpg.jpeg"></div>
        <div class="item "><img src="img//1/爱心回收小能手/bg3.jpg.jpeg"></div>
        <div class="item left"><img src="img/1/爱心回收小能手/bg4.jpg.jpeg"></div>
        <div class="item middle"><img src="img//1/爱心回收小能手/bg5.jpg.jpeg"></div>
        <div class="item right"><img src="img/1/爱心回收小能手/bg6.jpg.jpeg"></div> 
        </div> 
        <hr>
        <div class="page">
            <p>本次“爱心回收小能手”活动已经圆满结束啦！
                本次活动将原本处理不当很可能会造成环境污染和资源浪费的有关资源进行合理回收和利用，并将活动所得酬金捐给需要帮助的人，在变废为宝的同时也提高同学们关爱弱势群体的意识。
                感谢志愿者们的辛苦付出，为此次活动画上了一个圆满的记号。
                志愿同行，爱心同行，欢迎各位小麦苗们积极参与志愿活动呀
                让我们共同期待下一次的志愿活动的到来吧！</p>
        </div>
    </div>
    <div class="xiaorenR">
        <img src="img/p6.gif" width="100%" height="100%">
    </div>
    <div class="xiaorenL">
        <img src="img/p1.gif" width="100%" height="100%">
    </div>
    <script>
        var items = document.querySelectorAll('.item');
        for(var i=0;i<items.length;i++)
        {    
            items[i].addEventListener('click',function(){

                 for(let j=0;j<items.length;j++)
                {
                    items[j].classList.remove('left','right','middle');
                    items[j].classList.add('xiaoshi');
                    
                } 

                this.classList.remove('left','middle','right');
                this.classList.add('middle');
              

                let left = this.previousElementSibling ?? items[items.length-1];
                left.classList.add('left'); 
 
                let right = this.nextElementSibling ?? items[0]; 
                right.classList.add('right');  
                
            })
        }
     


    </script>
</body>
</html>